<template>
	<view class="desk-content">
		<template v-if="list.length === 0">
			<nodata></nodata>
		</template>
		<template v-else>
			<view class="desk" @click="go_desk_main(item)" v-for="item in list" :key="item.deskId">
				<view class="main" v-text="item.deskName"></view>
				<view class="sub" v-text="item.deskType.deskTypeName"></view>
				<view class="ft">全国统一售价：{{item.deskPrice}}元</view>
				<view class="pic">
					<image mode="heightFix" class="tt" :src="item.deskThumb.url"></image>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { get_desk_page_list, apiBase } from '../../request/index.js'
	import nodata from '../../common/nodata/index.vue'; 
	export default {
		components:{nodata},
		onLoad(options) {
			this.brandId = options.brandId;
			this.brandName = options.brandName;
			uni.setNavigationBarTitle({
				title: this.brandName
			});
		},
		data() {
			return {
				brandName : "",
				brandId: "",
				list : []
			}
		},
		onShow() {
			this.get_desk_page_list();
		},
		methods: {
			async get_desk_page_list(){
				try{
					const res = await get_desk_page_list(this.brandId);
					console.log("get_desk_page_list", res);
					if(res.success){
						res.data.forEach(d => {
							d.deskThumb.url = apiBase + d.deskThumb.url;
						});
						this.list = res.data;
					}
				}catch(e){
					console.log(e);
				}
			},
			go_desk_main(desk){
				uni.navigateTo({
					url:"/pages/deskmain/deskmain?deskId=" + desk.deskId + "&deskName=" + desk.deskName + "&brandName=" + this.brandName
				});
			}
		}
	}
</script>

<style>
page{
	background-color: rgb(233, 233, 233);
}

.desk-content{
	padding: 25rpx 25rpx 40rpx;
}

.desk-content .desk{
	height: 320rpx;
	background-color: red;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 13rpx 27rpx;
	box-sizing: border-box;
	margin-bottom: 25rpx;
}

.desk-content .desk .main{
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 3px;
}

.desk-content .desk .sub{
	font-weight: bold;
	font-size: 12px;
	color: #909399;
}

.desk-content .desk .ft{
	position: absolute;
	left: 15px;
	bottom: 7px;
	padding: 0 12px;
	height: 40rpx;
	line-height: 40rpx;
	background-color: #000;
	color: #fff;
	font-size: 14px;
	border-radius: 10px;
	z-index: 2;
}

.desk-content .desk .pic{
	position: absolute;
	right: 15px;
	top: 31px;
	width: 350rpx;
	height: 205rpx;
	z-index: 1;
}

.desk-content .desk .pic .tt{
	height: 100%;
}
</style>
